<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>江苏铁通网上商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/mui.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/public.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/iconfont.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/font-awesome.min.css" />
		<link rel="stylesheet" href="__PUBLIC__/weixin/css/main-index.css" />
		<style type="text/css">
			.mui-bar .mui-title {
				right: 65px;
				left: 65px;
			}
			
			.search {
				height: 29px;
				margin: 8px 0;
				background-color: #f0f0f0;
				font-size: 16px;
				text-align: center;
				border-radius: 4px;
			}
			
			.mui-search .mui-placeholder {
				font-size: 14px;
				top: 6px;
				color: #bbb;
				font-weight: normal;
			}
			
			.mui-search .mui-placeholder .mui-icon {
				color: #bbb;
			}
			
			#slider.mui-slider .mui-slider-group .mui-slider-item {
				height: auto;
/*				padding-top: 37.5%;*/
				overflow: hidden;
			}
			
			#slider.mui-slider .mui-slider-group .mui-slider-item>a:not(.mui-control-item) {
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#slider.mui-slider .mui-slider-group .mui-slider-item img {
				min-width: 320px;
				max-width: 960px;
				width: 100%;
				height: auto;
				min-height: 120px;
				max-height: 360px;
				display: block;
			}
			
			#slider .mui-slider-indicator {
				width: 54px;
				left: 50%;
				margin-left: -27px;
			}
			
			#slider .mui-slider-indicator .mui-indicator {
				width: 5px;
				height: 5px;
				background: #93a0ae;
				margin: 0 2px;
				-webkit-box-shadow: none;
				box-shadow: none;
				float: left;
			}
			
			#slider .mui-slider-indicator .mui-active.mui-indicator {
				background: #f44623;
			}
			/*弹窗样式*/
			
			.kefu-show h2 {
				height: 40px;
				line-height: 40px;
				font-size: 18px;
				text-align: center;
			}
			
			.kefu-show .close {
				display: block;
				width: 30px;
				height: 30px;
				font-size: 30px;
				color: #ff0000;
			}
			
			.kefu-show a {
				display: block;
				height: 40px;
				line-height: 40px;
				padding: 0 15px;
			}
			
			.kefu-show a i {
				display: inline-block;
				width: 20px;
				height: 20px;
				background-size: 100%;
				vertical-align: middle;
				margin-right: 8px;
			}
			
			.kefu-show a i.phone {
				background-image: url(__PUBLIC__/weixin/img/icon_phone.png);
			}
			
			.kefu-show a i.kf {
				background-image: url(__PUBLIC__/weixin/img/icon_kf.png);
			}
			
			.kefu-show a i.wx {
				background-image: url(__PUBLIC__/weixin/img/icon_wx.png);
			}
			
			.mui-popover {
				width: 288px;
				max-height: 432px;
				border-radius: 5px;
				border: none;
			}
			/*猜你喜欢*/
			
			.you-like {
				width: 50%;
				padding: 5px;
				border: 1px dashed #ebebeb;
				margin-bottom: 4px;
			}
			
			.slider-imgbox {
				width: 100%;
				padding-top: 100%;
			}
			
			.you-like em {
				display: block;
				height: 22px;
				line-height: 22px;
				margin: 5px 0;
				color: #051b28;
			}
			
			.you-like b {
				display: block;
				color: #f44623;
				padding-bottom: 5px;
				font-weight: normal;
			}
			/*今日爆款*/
			
			#hotgoods .mui-slider-indicator {
				background: #fff;
				padding-bottom: 2px;
				margin-top: -8px;
			}
			
			#hotgoods .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
				width: 7px;
				height: 7px;
				display: none;
				border-radius: 50%;
				background: rgba(117, 117, 117, .4);
			}
			
			#hotgoods .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background: #ff8a70;
			}
                        
                        /*搜索*/
                        .mui-content {
                            padding-top: 44px;
                        }
                        .mui-search {
                            position: absolute;
                            z-index: 3;
                            width: 100%;
                            padding: 5px;
                            background-color: #ffffff;
                        }
                        .mui-search input[type='search'] {
                            margin-bottom: 0;
                        }
                        
                        .mui-search .mui-placeholder {
                            top: 5px;
                            pointer-events: none;
                        }
                        .mui-search.mui-active:before {
                            left: 10px;
                            margin-top: -15px;
                        }
                        .mui-input-row.mui-search .mui-icon-clear {
                            top: 5px;
                            right: 5px;
                            height: 34px;
                            line-height: 34px;
                        }
		</style>

	</head>

	<body>
            <form action="">
		<div class="mui-input-row mui-search">
                   
                    <input type="search" id="search-btn" class="mui-input-clear" onkeyup="searchGoods(this)" placeholder="输入商品名称">
                    
                    
                </div>
                </form>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
                            
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							
								<img src="__PUBLIC__/weixin/img/img-lunbo.jpg">
							
						</div>
						<div class="mui-slider-item">
							
								<img src="__PUBLIC__/weixin/img/img-lunbo.jpg">
							
						</div>
						<div class="mui-slider-item">
							
								<img src="__PUBLIC__/weixin/img/img-lunbo.jpg">
							
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							
								<img src="__PUBLIC__/weixin/img/img-lunbo.jpg">
							
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
                                <volist name="data"  id="dt" >
                                    <div class="baokuan floor">
                                        <h3><i style="background:#f44623"></i>{$dt.type_name}<a thisUrl="{:U('Weixin/Index/typelist',array('id'=>$dt['id']))}">更多 <s class="arrow_r"></s></a></h3>
					<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ptb10">
						<div class="mui-scroll">
                                                    <volist name="dt['goods']" id='gs' offset="0" length='5'>
                                                        <a thisUrl="{:U('Weixin/Index/detail',array('id'=>$gs['id']))}" class="mui-control-item"><img src="{$gs.goods_imgs}" style="height:100px;">
								<div>{$gs.goods_name}</div>
							</a>
                                                    </volist>
						</div>
					</div>
                                    </div>
                                </volist>
				
                           
                            

				


				
			</div>
			<div id="returnTop" class="return-top mui-hidden">
				<i class="iconfont icon-fanhuidingbu"></i>
			</div>
		</div>

	</body>
	<script src="__PUBLIC__/weixin/js/mui.js"></script>
	<script>
		mui.init();
		mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
		});
		
		mui(".mui-scroll-wrapper").on('tap','a',function(){
                    window.location.href = this.getAttribute("thisUrl");
                })
                
//                document.getElementById("search-btn").addEventListener('tap', function() {
//                    this.focus();
//		});
                
                function searchGoods(t){
		    if(event.keyCode == 13){
		        var keywords = t.value;
		        console.log(keywords);
		        document.activeElement.blur();
		        t.blur();
		        window.location.href = "{:U('Weixin/Index/searchGoods')}?keywords="+keywords;
		    }
	    }

                

	</script>

</html>